<template>
  <div class="self">
    <nav-top title="个人中心" :goback="false"></nav-top>
    <div class="self-info">
      <img :src="avater" />
      <div class="is-login" v-if="islogin">
        <p class="p-phone">{{ name }}</p>
        <p class="p-vip">
          <!--<img src="/static/icon/self/vip-platinum.png" />白金会员-->
          {{ phone.substr(0,3) + "****" + phone.substr(7)}}
        </p>
      </div>
      <div class="no-login" v-else>
        <a href="/auth/login">{{ islogin ? phone : "点击登录/注册" }}</a>
      </div>
    </div>
    <div class="action-list">
      <a :href="item.url" v-for="item in itemList" :key="item.title" v-show="item.url == '/user/self' ? false : true">
        <div class="action-item">
          <div class="icon-img">
            <img :src="item.icon" />
          </div>
          <div class="action-title">{{ item.title }}</div>
          <img class="goto-img" src="/static/icon/self/goto-icon.png" />
        </div>
      </a>
    </div>
    <div class="btn-div" v-show="false">
      <van-button class="login-btn" type="primary" size="large" @click="logout">
        {{ islogin ? '取消登录' : '登录' }}
      </van-button>
    </div>
  </div>
</template>


<script>
import NavTop from "@/components/nav/navBar";
import { UserInfo } from './../../libs/api'
export default {
  components: {
    NavTop,
  },
  name: "Self",
  created:function(){
    UserInfo("self")
    .then((resp)=>{
        var res = resp.data
        if(res.code==1){
          this.avater = res.data.user.head_img
          this.phone = res.data.user.phone
          this.name = res.data.user.name
          this.islogin = true
          return
        }
        // this.$notify({ type: 'danger', message: res.msg });
      })
      .catch((err)=>{
        this.$notify({ type: 'danger', message: err });
      })
  },
  methods:{
    logout(){
      this.$cookies.remove('authtoken'); // fail!
      window.location.href = '/auth/login'
    }
  },
  data() {
    return {
      avater: "/static/icon/self/default-avatar.png",
      vipType: "",
      phone: "",
      islogin: false,
      name:"",
      itemList: [
        {
          url: "/user/account",
          icon: "/static/icon/self/wallet.png",
          title: "我的账户"
        },
        {
          url: "/user/member",
          icon: "/static/icon/self/vip.png",
          title: "会员权益"
        },
        {
          url: "/order",
          icon: "/static/icon/self/reservation.png",
          title: "我的订单"
        },
        {
          url: "/user/self",
          icon: "/static/icon/self/collection.png",
          title: "我的收藏"
        },
        {
          url: "/user/self",
          icon: "/static/icon/self/comment.png",
          title: "我的评论"
        },
        {
          url: "/user/team",
          icon: "/static/icon/self/recruit.png",
          title: "我的团队"
        },
        {
          url: "/user/recruitment",
          icon: "/static/icon/self/recruit.png",
          title: "招募会员"
        },
        {
          url: "/setting",
          icon: "/static/icon/self/setting.png",
          title: "我的设置"
        }
      ]
    };
  }
};
</script>

<style lang='scss' scoped>
.self {
  height: 638px;
  .self-info {
    margin-top: 46px;
    height: 112px;
    width: 320px;
    img {
      float: left;
      width: 71px;
      height: 71px;
      border-radius: 50%;
      margin: 22px 15px 20px 15px;
    }
    .no-login a {
      margin-top: 52px;
      float: left;
      font-size: 16px;
      font-family: Microsoft YaHei;
      line-height: 1em;
      color: #a6bcc7;
    }
    .is-login {
      margin-top: 40px;
      float: left;
      font-family: Microsoft YaHei;
      line-height: 1em;
      p {
        margin: 0px;
      }
      .p-phone {
        color: #a6bcc7;
        font-size: 16px;
      }
      .p-vip {
        margin-top: 7px;
        color: #666666;
        font-size: 8px;
        img {
          object-fit: scale-down;
          margin: 0px;
          margin-right: 6px;
          width: 14px;
          height: 17px;
        }
      }
    }
  }
  .action-list {
    width: 320px;
    background-color: #f5f5f5;
      padding-top: 9px;
    .action-item {
      margin-bottom: 9px;
      background-color: #fff;
      width: 320px;
      height: 43px;
      .icon-img {
        float: left;
        width: 30px;
        margin-right: 9px;
        img {
          float: right;
          object-fit: scale-down;
          margin-top: 12px;
          height: 17px;
        }
      }
      .action-title {
        float: left;
        font-size: 14px;
        line-height: 1em;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        margin-top: 15px;
      }
      .goto-img {
        float: right;
        margin-top: 8px;
        width: 37px;
        height: 23px;
      }
    }
    .action-item:last{
      margin-bottom: 0px;
    }
  }
  .btn-div {
    margin: 27px 10px 0 10px;
    .login-btn {
      height: 44px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1px;
      background-color: #06a44f;
      border-color: #06a44f;
      border-radius: 2px;
    }
  }
}
</style>